<div class="container-fluid" id="deployHistoryList">
    <form class="form-inline pull-left col-sm-12">
        <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="openAddDialog()">
            {{'ADD' | translate}}
        </button>
    </form>
    <table class="table table-bordered">
        <tr>
<!--            <th class="text-center">{{'CLUSTER_NAME'|translate}}</th>-->
            <th class="text-center">{{'BROKER'|translate}}</th>
            <th class="text-center">accessKey</th>
            <th class="text-center">secretKey</th>
<!--            <th class="text-center">whiteRemoteAddress</th>-->
            <th class="text-center">admin</th>
<!--            <th class="text-center">defaultTopicPerm</th>-->
<!--            <th class="text-center">defaultGroupPerm</th>-->
            <th class="text-center">topicPerms</th>
            <th class="text-center">groupPerms</th>
            <th class="text-center">{{ 'OPERATION' | translate}}</th>
        </tr>
        <tr ng-repeat="account in accounts">
<!--            <td class="text-center">{{account.cluster}}</td>-->
            <td class="text-center">{{account.brokerName}}</td>
            <td class="text-center">{{account.accessKey}}</td>
            <td class="text-center">{{account.secretKey}}</td>
<!--            <td class="text-center">{{account.whiteRemoteAddress}}</td>-->
            <td class="text-center">{{account.admin}}</td>
<!--            <td class="text-center">{{account.defaultTopicPerm}}</td>-->
<!--            <td class="text-center">{{account.defaultGroupPerm}}</td>-->
            <td>
                <ul>
                    <li ng-repeat="topic in account.topicPerms">
                        {{ topic }}
                    </li>
                </ul>
            </td>
            <td>
                <ul>
                    <li ng-repeat="group in account.groupPerms">
                        {{ group }}
                    </li>
                </ul>
            </td>
            <td class="text-center row">
                <button class="btn btn-raised btn-sm btn-primary" type="button"
                        ng-show="{{!account.admin}}"
                        ng-click="openUpdateDialog(account)">{{'CONFIG' |translate}}
                </button>
                <button class="btn btn-raised btn-sm btn-danger" type="button"
                        ng-show="{{!account.admin}}"
                        ng-confirm-click="Are you sure to delete?"
                        confirmed-click="deleteAccount(account)">{{'DELETE' | translate}}
                </button>
            </td>
        </tr>
    </table>
</div>

<script type="text/ng-template" id="accountModifyDialog">
    <div class="modal-header">
        <h4 class="modal-title">账号编辑</h4>
    </div>
    <div class="modal-body" ng-init="item = ngDialogData.accountRequest">
        <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
            <div class="form-group">
                <label class="control-label col-sm-3">{{'CLUSTER_NAME'|translate}}:</label>
                <div class="col-sm-9">
                    <select name="mySelectCluster" chosen ng-disabled="ngDialogData.bIsUpdate"
                            ng-model="item.cluster"
                            ng-options="clusterNameItem for clusterNameItem in ngDialogData.allClusterNameList"
                            required >
                        <option value=""></option>
                    </select>
                    <span class="text-danger" ng-show="addAppForm.mySelectCluster.$error.required">{{'CLUSTER_NAME'|translate}}不能为空.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">{{'BROKER'|translate}}:</label>
                <div class="col-sm-9">
                    <select name="mySelectBrokerAddr" chosen ng-disabled="ngDialogData.bIsUpdate"
                            ng-model="item.brokerAddr"
                            ng-options="value.brokerAddrs[0] as key for (key, value) in ngDialogData.allBrokerNameList"
                            required >
                        <option value=""></option>
                    </select>
                    <span class="text-danger" ng-show="addAppForm.mySelectBrokerAddr.$error.required">{{'TOPIC'|translate}}不能为空.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">accessKey:</label>
                <div class="col-sm-9">
                    <input class="form-control" ng-model="item.accessKey" name="accessKey" type="text"
                           ng-disabled="ngDialogData.bIsUpdate" required/>
                    <span class="text-danger" ng-show="addAppForm.accessKey.$error.required">accessKey不能为空.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">secretKey:</label>
                <div class="col-sm-9">
                    <input class="form-control" ng-model="item.secretKey" name="secretKey" type="text" required/>
                    <span class="text-danger" ng-show="addAppForm.secretKey.$error.required">secretKey不能为空.</span>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="control-label col-sm-3">whiteRemoteAddress:</label>
                <div class="col-sm-9">
                    <input class="form-control" ng-model="item.whiteRemoteAddress" type="text"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">defaultTopicPerm:</label>
                <div class="col-sm-9">
                    <input class="form-control" ng-model="item.defaultTopicPerm" type="text"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">defaultGroupPerm:</label>
                <div class="col-sm-9">
                    <input class="form-control" ng-model="item.defaultGroupPerm" type="text"/>
                </div>
            </div>-->
            <div class="form-group">
                <label class="control-label col-sm-3">topicPerms:</label>
                <div class="col-sm-9">
                    <input class="form-control" ng-model="item.topicPerms" type="text"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">groupPerms:</label>
                <div class="col-sm-9">
                    <input class="form-control" ng-model="item.groupPerms" type="text"/>
                </div>
            </div>
        </form>
        <div class="modal-footer">
            <div class="ngdialog-buttons">
                <button type="button" class="ngdialog-button ngdialog-button-primary"
                        ng-show="{{!ngDialogData.adminFlag}}" ng-disabled="addAppForm.$invalid"
                        ng-click="postAccountRequest(item)">{{ 'COMMIT' | translate }}
                </button>
                <button type="button" class="ngdialog-button ngdialog-button-secondary"
                        ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
                </button>
            </div>
        </div>
    </div>
</script>